<template>
    <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
        <!-- 布局样式 -->
        <el-divider class="divider" content-position="center">
            <el-icon>
                <Notification />
            </el-icon>布局样式
        </el-divider>
        <div class="layout-box">
            <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
                <div
                    :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]"
                    @click="setLayout('vertical')"
                >
                    <div class="layout-dark"></div>
                    <div class="layout-container">
                        <div class="layout-light"></div>
                        <div class="layout-content"></div>
                    </div>
                    <el-icon v-if="layout == 'vertical'">
                        <CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <el-tooltip v-if="false" effect="dark" content="经典" placement="top" :show-after="200">
                <div
                    :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]"
                    @click="setLayout('classic')"
                >
                    <div class="layout-dark"></div>
                    <div class="layout-container">
                        <div class="layout-light"></div>
                        <div class="layout-content"></div>
                    </div>
                    <el-icon v-if="layout == 'classic'">
                        <CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
                <div
                    :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]"
                    @click="setLayout('transverse')"
                >
                    <div class="layout-dark"></div>
                    <div class="layout-content"></div>
                    <el-icon v-if="layout == 'transverse'">
                        <CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
            <el-tooltip v-if="false" effect="dark" content="分栏" placement="top" :show-after="200">
                <div
                    :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]"
                    @click="setLayout('columns')"
                >
                    <div class="layout-dark"></div>
                    <div class="layout-light"></div>
                    <div class="layout-content"></div>
                    <el-icon v-if="layout == 'columns'">
                        <CircleCheckFilled />
                    </el-icon>
                </div>
            </el-tooltip>
        </div>
        <div class="theme-item">
            <span>
                侧边栏反转色
                <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
                    <el-icon>
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </span>
            <el-switch v-model="asideInverted" @change="setAsideTheme" />
        </div>
        <div class="theme-item mb50">
            <span>
                头部反转色
                <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
                    <el-icon>
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </span>
            <el-switch v-model="headerInverted" @change="setHeaderTheme" />
        </div>

        <!-- 全局主题 -->
        <el-divider class="divider" content-position="center">
            <el-icon>
                <ColdDrink />
            </el-icon>全局主题
        </el-divider>
        <div class="theme-item">
            <span>主题颜色</span>
            <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
        </div>
        <div class="theme-item">
            <span>暗黑模式</span>
            <SwitchDark />
        </div>
        <div class="theme-item">
            <span>灰色模式</span>
            <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
        </div>
        <div class="theme-item mb40">
            <span>色弱模式</span>
            <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
        </div>

        <!-- 界面设置 -->
        <el-divider class="divider" content-position="center">
            <el-icon>
                <Setting />
            </el-icon>界面设置
        </el-divider>
        <div class="theme-item">
            <span>菜单折叠</span>
            <el-switch v-model="isCollapse" />
        </div>
        <div class="theme-item">
            <span>菜单手风琴</span>
            <el-switch v-model="accordion" />
        </div>
        <div class="theme-item">
            <span>水印</span>
            <el-switch v-model="watermark" />
        </div>
        <div class="theme-item">
            <span>面包屑</span>
            <el-switch v-model="breadcrumb" />
        </div>
        <div class="theme-item">
            <span>面包屑图标</span>
            <el-switch v-model="breadcrumbIcon" />
        </div>
        <div class="theme-item">
            <span>标签栏</span>
            <el-switch v-model="tabs" />
        </div>
        <div class="theme-item">
            <span>标签栏图标</span>
            <el-switch v-model="tabsIcon" />
        </div>
        <div class="theme-item">
            <span>页脚</span>
            <el-switch v-model="footer" />
        </div>
    </el-drawer>
</template>

<script setup >
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useTheme } from "@/hooks/useTheme"
import { useGlobalStore } from "@/store/modules/global"
import { DEFAULT_PRIMARY } from "@/config"
import mittBus from "@/utils/mittBus"
import SwitchDark from "@/components/SwitchDark/index.vue"

const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme()

const globalStore = useGlobalStore()
const {
    layout,
    primary,
    isGrey,
    isWeak,
    asideInverted,
    headerInverted,
    isCollapse,
    accordion,
    watermark,
    breadcrumb,
    breadcrumbIcon,
    tabs,
    tabsIcon,
    footer
} = storeToRefs(globalStore)

// 预定义主题颜色
const colorList = [
    DEFAULT_PRIMARY,
    "#daa96e",
    "#0c819f",
    "#409eff",
    "#27ae60",
    "#ff5c93",
    "#e74c3c",
    "#fd726d",
    "#f39c12",
    "#9b59b6"
]

// 设置布局方式
const setLayout = (val) => {
    globalStore.setGlobalState("layout", val)
    setAsideTheme()
}

// 打开主题设置
const drawerVisible = ref(false)
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
